@charset "utf-8";
@import "../lib/hotcss-v2.0.1/imochen-hotcss/src/px2rem.scss";

$designWidth: 640;

.container {
  background: #eeeeee;
}

header {
  top: 0;
  left: 0;
  z-index: 1000;
  position: fixed;
  width: 100%;
  .top-hd {
    height: px2rem(75);
    width: 100%;
    background: linear-gradient(to right, #910657, #f71c5a);

    color: white;
    h3 {
      font-size: px2rem(32);
      display: block;
      font-weight: 500;
      height: px2rem(75);
      line-height: px2rem(75);
      text-align: center;
    }
    .tp-shopcart-edit {
      position: absolute;
      top: 50%;
      right: px2rem(23);
      transform: translate(0, -50%);
      font-size: px2rem(28);
      color: white;
    }
  }
}

main {
  margin: px2rem(74) auto px2rem(161);
  .goods-list-wrap {
    background-color: #ffffff;
    margin: 0 auto;
    .goods-list {
      .goods-item {
        .goods-item-hd {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          height: px2rem(61);
          border-bottom: 1px solid #eaeaea;
          box-sizing: border-box;
          .icon-icon-test {
            flex: 0 0 px2rem(36);
            margin-left: px2rem(23);
            display: inline-block;
            height: px2rem(35);
            width: px2rem(35);
            font-size: px2rem(21);
            line-height: px2rem(35);
            text-align: center;
            border-radius: 50%;
            color: #eee;
            background-color: #ec1a5a;
          }
          .goods-shopname {
            padding: px2rem(13);
            display: inline-block;
            font-size: px2rem(25);
            line-height: px2rem(25);
            height: px2rem(25);
            font-weight: 300;
            color: #444444;
          }
        }
        .goods-item-bd {
          height: px2rem(181);
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .goods-item-bd-l {
            margin-left: px2rem(13);
            border: 1px solid #eaeaea;
            box-sizing: border-box;
            img {
              vertical-align: top;
              height: px2rem(158);
              width: px2rem(156);
            }
          }
          .icon-icon-test {
            flex: 0 0 px2rem(36);
            margin-left: px2rem(23);
            display: inline-block;
            height: px2rem(35);
            width: px2rem(35);
            font-size: px2rem(21);
            line-height: px2rem(35);
            text-align: center;
            border-radius: 50%;
            color: #eee;
            background-color: #ec1a5a;
          }
          .goods-item-bd-r {
            height: px2rem(158);
            margin-left: px2rem(11);
            margin-right: px2rem(23);
            .goods-itme-name {
              color: #3d3d3d;
              font-size: px2rem(20);
              line-height: px2rem(25);
            }
            .goods-item-sku {
              line-height: px2rem(25);
              font-size: px2rem(20);
              .sku-name {
                color: #888888;
              }
              .sku-value {
                color: #ee306a;
              }
            }
            .goods-item-bd-r-img {
              margin-top: px2rem(5);
              img {
                display: block;
                width: px2rem(57);
                height: px2rem(17);
              }
            }
            .goods-itme-price {
              margin-top: px2rem(7);
              font-size: px2rem(20);
              color: #ec1a5a;
            }
            .goods-item-bd-r-operating {
              margin-top: px2rem(9);
              overflow-y: hidden;
              font-size: px2rem(20);
              display: flex;
              justify-content: space-between;
              align-items: center;
              .operating-l {
                border: 1px solid #bebebe;
                border-radius: px2rem(4);
                box-sizing: border-box;
                span {
                  font-weight: 500;
                  padding: 0 px2rem(12);
                  float: left;
                  height: px2rem(35);
                  line-height: px2rem(35);
                }
                .operating-l-number {
                  border-left: 1px solid #bebebe;
                  border-right: 1px solid #bebebe;
                }
              }
              .operating-r {
                .icon-xiugai {
                  font-size: px2rem(30);
                  color: #747474;
                }
              }
            }
          }
        }
        .goods-interval {
          height: px2rem(16);
          width: 100%;
          background: #eeeeee;
        }
      }
    }
  }
}

footer {
  z-index: 1000;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  .goods-account-wrap {
    .goods-account-wrap-hd {
      background: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: px2rem(77);
      width: 100%;
      .account-l {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .icon-icon-test {
          flex: 0 0 px2rem(36);
          margin-left: px2rem(23);
          display: inline-block;
          height: px2rem(35);
          width: px2rem(35);
          font-size: px2rem(21);
          line-height: px2rem(35);
          text-align: center;
          border-radius: 50%;
          color: #eee;
          background-color: #ec1a5a;
        }
        span {
          margin-left: px2rem(13);
          writing-mode:vertical-lr;
          font-size: px2rem(27);
          line-height: px2rem(27);
          height:px2rem(27); 
          color: #888888;
        }
      }
      .account-r {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .account-r-sum {
          font-size: px2rem(23);
          color: #888888;
          .price-num {
            font-size: px2rem(24);
            color: #ec1e5d;
            font-weight: 200;
          }
        }
        .account-r-settle {
          margin-left: px2rem(30);
          width: px2rem(190);
          height: px2rem(77);
          line-height: px2rem(77);
          text-align: center;
          background: linear-gradient(to right, #910657, #f71c5a);
          color: #eeeeee;
          font-size: px2rem(27);
        }
      }
    }
    .goods-account-wrap-bd {
      background: #171717;
      color: #f6f6f6;
      ul {
        height: px2rem(84);
        display: flex;
        justify-content: space-around;
        align-items: center;
        li {
          i {
            display: block;
            font-size: px2rem(46);
            width: px2rem(55);
            height: px2rem(46);
            line-height: px2rem(46);
            text-align: center;
          }
          span {
            margin-top: px2rem(2);
            width: px2rem(55);
            display: block;
            font-size: px2rem(18);
            height: px2rem(18);
            line-height: px2rem(18);
            text-align: center;
          }
          .icon-leimupinleifenleileibie {
            margin-left: px2rem(2);
          }
          .icon-gouwuche {
            margin-left: px2rem(-6);
          }
        }
      }
    }
  }
}
